<template>

    <div class="common-layout">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="cxlist" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="cxlist.cname" placeholder="作品名" @keydown.enter.native="cx" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="cxlist.cstate" placeholder="作品状态">
                            <el-option label="未发行" value="0" />
                            <el-option label="已售罄" value="1" />
                            <el-option label="售卖中" value="2" />
                            <el-option label="已下架" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="cx">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="margin-left: 600%;" @click="drawer = true">
                            +添加
                        </el-button>
                        <el-drawer v-model="drawer" title="添加商品" :direction="direction" :before-close="handleClose" size="40%">
                            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
                                class="demo-ruleForm" :size="formSize" status-icon>
                                <el-form-item label="作品名称" prop="name">
                                    <el-input v-model="ruleForm.name" placeholder="作品名" />
                                </el-form-item>
                                <el-form-item label="所属系列" prop="type">
                                    <el-select v-model="ruleForm.type" placeholder="所属系列">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in typelist" :label="item.name" :value="item.id">
                                        </el-option>

                                        <!-- <el-option label="Zone one" value="1" />
                                        <el-option label="Zone one" value="1" />
                                        <el-option label="Zone two" value="2" /> -->
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="作品图片">
                                    <el-upload ref="upload" action="#" list-type="picture" :auto-upload="false"
                                        :limit="1" :on-change="changeIamge" :disabled="imageData != null">
                                        <template #trigger>
                                            <el-button slot="trigger" size="small" type="primary"
                                                :disabled="imageData != null">选取文件</el-button>
                                        </template>
                                        <el-button slot="trigger" size="small" type="warning" @click="cancelChoose"
                                            style="margin-left:20px;">取消</el-button>
                                        <template #tip>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div>
                                        </template>
                                    </el-upload>

                                </el-form-item>
                                <el-form-item label="作品价格" prop="price">
                                    <el-input v-model="ruleForm.price" />
                                </el-form-item>
                                <el-form-item label="发售时间" required>
                                    <el-col :span="11">
                                        <el-form-item prop="date1">
                                            <el-date-picker  type="date" label="开始时间" v-model="ruleForm.date1"
                                                placeholder="发售时间" style="width: 100%" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="text-center" :span="2">
                                        <span class="text-gray-500">-</span>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date2">
                                            <el-time-picker v-model="ruleForm.date2"  
                                                placeholder="发售时间" style="width: 100%" />
                                        </el-form-item>
                                    </el-col>
                                </el-form-item>

                               <el-form-item label="下架时间" required>
                                    <el-col :span="11">
                                        <el-form-item prop="date3">
                                            <el-date-picker v-model="ruleForm.date3" type="date" 
                                                placeholder="下架时间" style="width: 100%" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="text-center" :span="2">
                                        <span class="text-gray-500">-</span>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date4">
                                            <el-time-picker v-model="ruleForm.date4" 
                                                placeholder="下架时间" style="width: 100%" />
                                        </el-form-item>
                                    </el-col>
                                </el-form-item> 
                               

                                <el-form-item label="发行数量" prop="number">
                                    <el-input v-model="ruleForm.number" />
                                </el-form-item>
                                <el-form-item label="作品描述" prop="desc">
                                    <el-input v-model="ruleForm.desc" type="textarea" />
                                </el-form-item>
                                <el-button type="primary" @click="handleAdd('ruleFormRef')">添加</el-button>
                            </el-form>
                        </el-drawer>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <div>
                    <el-table :data="list" style="width: 100%; text-align: start;" empty-text="暂无数据"
                        :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table">
                        <el-table-column fixed prop="id" label="ID"   show-overflow-tooltip />
                        <el-table-column prop="cname" label="作品信息"  show-overflow-tooltip />
                        <el-table-column prop="price" label="作品价格"   show-overflow-tooltip />
                        <el-table-column prop="releasenum" label="发行数量"   show-overflow-tooltip>

                        </el-table-column>
                        <el-table-column prop="state" label="作品状态"   show-overflow-tooltip />
                        <el-table-column prop="startdate" label="发行日期"   show-overflow-tooltip/>
                        <el-table-column fixed="right" label="操作"   show-overflow-tooltip>
                            <template #default="a">
                                <el-button link type="primary" size="small" @click="Position1(a.row)">
                                    持仓
                                </el-button>

                                <el-button link type="primary" size="small" v-if="a.row.state == '已下架'">
                                    上架
                                </el-button>

                                <el-button link type="primary" size="small" @click="Takedown(a.row)"
                                    v-else-if="a.row.state == '售卖中'">
                                    下架
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog v-model="Position" title="持仓详情" width="40%" align-center>
                        <!-- <span>Open the dialog from the center from the screen</span> -->
                        <el-table :data="userlist" style="width: 200%; text-align: start;" empty-text="暂无数据"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table">
                            <el-table-column fixed prop="username" label="用户账号" width="200" />
                            <el-table-column prop="num" label="持有数量" width="80" />
                        </el-table>


                    </el-dialog>
                </div>
                <!-- <div class="bar">
                    <span>总计 <span class="number"></span> {{cxlist.count}}条数据</span> -->
                <!-- <el-pagination 
                        layout="prev, pager, next" :total=formInline.count @current-change="select()" /> -->
                <!-- :page-size="formInline.pageSize" v-model:current-page="formInline.currentPage" -->
                <div class="demo-pagination-block">

                    <el-pagination v-model:current-page="cxlist.currentPage" v-model:page-size="cxlist.pageSize"
                        :page-sizes="[2, 3, 4, 5]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="cxlist.count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>


            </el-main>
        </el-container>
    </div>



</template>

<script>




export default {
    name: 'Opus',

    data() {
       
 
      
        return {
            typelist: [],
            userlist: [],
            imageData:null,
            Position: false,
            input2: '',
            list: [],
            cxlist: { cname: '', cstate: '', currentPage: 1, pageSize: 2, count: 0 },
            drawer: false,
            formSize: 'default',
            ruleForm: {cname:'',type:'',releasenum:'',price:'',content:'',date2:'', date4:'',date3:'',date1:''},
            rules: {
                name: [
                    { required: true, message: '作品名不能为空', trigger: 'blur' },
                    { min: 1, max: 15, message: '名字只能为3-15个字', trigger: 'blur' },
                ],
                type: [
                    {
                        required: true,
                        message: '系列不能为空',
                        trigger: 'change',
                    },
                ],
                
                number: [
                    {
                        // type: 'array',
                        required: true,
                        message: '发行数量不能为空',
                        trigger: 'blur',
                    },
                ],
                price: [
                    {
                        required: true,
                        message: '价格不能为空',
                        trigger: 'blur',
                    },
                ],
                desc: [
                    { required: true, message: '描述不能为空', trigger: 'blur' },
                ],
            },
           
     

        };
    },

    mounted() {
        this.cx();
        this.cxtype();
    
    },
    computed: {
           
        },

    watch: {

    },
    methods: {
        cxtype() {
            var url = 'http://localhost:8083/CollectionServlet/queryAllType';
            this.$http.post(url)
                .then((res) => {
                    this.typelist = res.data;
                })
        },

        Position1(a) {
            console.log(a);
            var url = 'http://localhost:8083/CollectionServlet/queryByname';
            this.$http.post(url, a)
                .then((response) => {
                    this.userlist = response.data;

                   
                })
            this.Position = true;
        },
        Takedown() {

        },
        handleSizeChange() {
            this.cx();
        },
        handleCurrentChange() {
            this.cx();
        },
        cx() {
            let url = 'http://localhost:8083/CollectionServlet/queryByCondition';
            this.$http.post(url, this.cxlist)
                .then((response) => {
                    // console.log(response);
                    this.list = response.data.records;
                    this.cxlist.count = response.data.count;
                    this.cxlist.pageSize = response.data.pageSize;
                    for (var i = 0; i < this.list.length; i++) {


                        if (this.list[i].startdate >= new Date().getTime()) {
                            this.list[i].state = '未发行';
                        }
                        else if (this.list[i].enddate <= new Date().getTime()) {
                            this.list[i].state = '已下架';
                        }
                        else {
                            if (this.list[i].residual == 0) {
                                this.list[i].state = '已售罄';
                            }

                            else {
                                this.list[i].state = '售卖中'
                            }
                        }
                        this.list[i].startdate = new Date(this.list[i].startdate).toJSON().replace(/T|Z|(\.\D{3})/g, " ").trim();

                    }
                   
                }).catch(function (error) {
                    console.log(error);
                })



        },
        onSubmit() {
            this.cxlist.cname = '';
            this.cxlist.cstate = '';
            this.cx();
        },
        handleAdd(formName) {
            var that = this;     
            that.$refs[formName].validate((valid) => {
                console.log("valid", valid);
                if (valid) {

                    //debugger  //打断点
                    // 数组非空校验
                    if (that.imageData == null) {
                        that.$alert("请选择图片再进行上传操作");
                        return;
                    }
                    if (this.beforeAvatarUpload(that.imageData)) {
                        //创建一个请求体  
                        const formData = new FormData();
                        formData.append("cname", that.ruleForm.name);
                        formData.append("type", that.ruleForm.type);
                        formData.append("releasenum", that.ruleForm.number);
                        formData.append("price", that.ruleForm.price);
                        formData.append("content", that.ruleForm.desc);
                        formData.append("startdate", that.ruleForm.date1.getTime()+ (that.ruleForm.date2.getTime()-new Date(new Date().toLocaleDateString()).getTime()));
                        formData.append("enddate", that.ruleForm.date3.getTime()+ (that.ruleForm.date4.getTime()-new Date(new Date().toLocaleDateString()).getTime()));
                        formData.append("cimg", that.imageData);
                        console.log(formData.keys);
                        console.log(formData.startdate);
                        console.log(formData.enddate);
                        // axync await 等待当前图片上传完成
                        let url = 'http://localhost:8083/CollectionServlet/add';
                        that.$http.post(url, formData, {
                            'Content-type': 'multipart/form-data'
                        }).then((res) => {
                            //判断当前操作是否成功
                            if (res.meta.status == 200) {
                                that.$message.success(res.meta.msg);
                                console.log(res);
                                //that.resultImage = res.data;
                                // console.log(that.resultImage);
                                that.$refs[formName].resetFields();
                                this.$refs.upload.clearFiles();
                            } else {
                                that.$message.error(res.meta.msg);
                            }
                        });
                    }
                } else {
                    return false;
                }

            });

            //...
        },
        changeIamge(file) {
            console.log(file);
            this.imageData = file.raw;
        },
        beforeAvatarUpload(file) {

            console.log(file.type)
            const isJPG = file.type === 'image/jpeg'; //true
            const isPNG = file.type === 'image/png'; //false
            const isLt2M = file.size / 1024 / 1024 < 2; //true

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                this.imageData = null;
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过2MB!');
                this.imageData = null;
            }
            return (isJPG || isPNG) && isLt2M;
        },
        cancelChoose() {
            this.imageData = null;
            this.$refs.upload.clearFiles();
        }
    },
};
</script>

<style lang="css" scoped>
.el-form-item {
    margin-top: 20px;
}

.bar {
    border-top: 1px solid silver;
    float: right;
}

.bar>span {
    margin-top: 16px;
    display: inline-block;

}
</style>